<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 20px 0 20px 100px;
        }
        p{
            color: #185;
            font-size: 20px;
            font-weight: bolder;
        }
        div{
            background: url("img/image.jpg") no-repeat red;
            width: 600px;
            height: 300px;
        }
        .b1{
            background-size: 600px 300px;
        }
        .b2{
            background-size: cover;
        }
        .b3{
            background-size: contain;
        }
        h2{
            text-shadow: 2px 11px 1px #89cae9;
        }
        section{
            width: 200px;
            height: 120px;
            border: 1px solid red;
            background-color: green;
            padding: 20px;
            word-wrap: break-word;
        }
        @font-face {
            font-family: omg;
            src: url("fonts/ShimesOne_PERSONAL.ttf");
            /*src: url("fonts/ShimesTwo_PERSONAL.ttf");*/
            font-weight: normal;
            font-style: normal;
        }
        footer{
            font-size: 80px;
            font-family: omg;
        }
    </style>
</head>
<body>
    <p>像素</p>
    <div class="b1">
    </div>
    <p>cover</p>
    <div class="b2">
    </div>
    <p>contain</p>
    <div class="b3">
    </div>
    <p>text-shadow</p>
    <h2>我是文本阴影</h2>
    <p>word-wrap</p>
    <section>
        <span>thisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongwordthisalongword</span>
    </section>
    <footer>this a long time</footer>
</body>
</html>